<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
	<script src="../layui/layui.js"></script>
	<script src="../static/js/utils.js"></script>
	<script type="text/javascript">
		layui.use([ 'table', 'form' ], function() {
			var layer = layui.layer;
			var form = layui.form;
			var $ = layui.jquery;
			var table = layui.table;
			

			table.render({
				elem : '#dg',
				url : '../order/listPage',
				id : 'orderTable',
				page : true,
				cols : [ [ //表头
				{
					field : 'oid',
					title : 'ID',
					checkbox : true
				},{
					field : 'oid',
					title : '订单号'
				}, {
					field : 'gid',
					title : '商品编号',
				}, {
					field : 'gname',
					title : '商品名',
				}, {
					field : 'lname',
					title : '物流公司',
				}, {
					field : 'bid',
					title : '客户编号',
				}, {
					field : 'bname',
					title : '客户名',
				}, {
					field : 'createTime',
					title : '订单创建时间',
				}, {
					field : 'modifyTime',
					title : '订单修改时间',
				}, {
					field : 'goodsQuantity',
					title : '商品数量',
				}, {
					field : 'statstr',
					title : '订单状态',
				}, {
					field : 'uname',
					title : '处理人',
				}, {
					fixed : 'right',
					align : 'center',
					title : '操作',
					toolbar : '#barDemo',
					width : 160
				} ] ],
				parseData : function(res) { //将原始数据解析成 table 组件所规定的数据
					for ( var index in res.data) {
						var orders = res.data[index];
						orders.bname = orders.buyer.bname;
						if(orders.logistic!=null){
							orders.lname = orders.logistic.lname;
						}else{
							orders.lname = "暂无";	
						}
						if(orders.user){
							orders.uname = orders.user.uname;
						}else{
							orders.uname = "";
						}
						
						orders.gname = orders.goods.gname;
						orders.gid = orders.goods.gid;
						orders.bid = orders.buyer.bid;
						orders.createTime = dateTime2Str(orders.createTime);
						orders.modifyTime = dateTime2Str(orders.modifyTime);
						orders.statstr = statusInt2Str(orders.stat);

						//console.log(orders);
					}

					return {
						"code" : res.code, //解析接口状态
						"msg" : res.msg, //解析提示文本
						"count" : res.count, //解析数据长度
						"data" : res.data//解析数据列表
					};
				}
			});

			//搜索
			$('#search-btn').click(function() {
				var formInput = $('#form-input');
				var formSelect = $('#form-select');
				//console.log("hello");

				//执行重载
				table.reload('orderTable', {
					page : {
						curr : 1
					//重新从第 1 页开始
					},
					where : {
						oid : formInput.val(),
						stat : formSelect.val()
					}
				}, 'data');
			});

			table.on('tool(test)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data //获得当前行数据
				, layEvent = obj.event; //获得 lay-event 对应的值
				if (layEvent === 'deliver') {

					layer.open({
						title : '选择快递公司',
						content : $('#deliver-dialog').html(),
						type : 1,
						closeBtn : 1,
						area: ['350px', '250px']
					});

					//填充表单
					form.val("deliver-form", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
						'oid' : data.oid,
						'stat' : 2 //点击发货按钮后状态变为已发货
					});

					//console.log(data);
					//fillSelect($,'../logistic/list', '#com-select','lname','lid',data.logistic.lid);
					$.ajax({
						url : '../logistic/list',
						type : "post",
						dataType : "json",
						success : function(data) {
							//console.log(data.lid)
							if (data) {
								$('#com-select').empty();
								for ( var index in data) {
									var item = data[index];
									$('#com-select').append(new Option(item['lname'], item['lid']));
								}
							} else {
								$('#com-select').append(new Option("暂无数据", ""));
							}
					
							if (data.lid) {
								//如果传入了值，则赋值
								$('#com-select' + " option[value='"+ data.lid + "']").attr("selected", true);
							}
							layui.form.render("select");
							console.log(data.lid)
						}
					});
					form.on('submit(deliver-submit)', function(data) {
						console.log(data.field),
						//console.log(obj.data.goodsQuantity),
						$.post('../order/updateLogistic', {
							'oid' : data.field.oid,
							'stat' : data.field.stat, //点击发货按钮后状态变为已发货
							'lid' : data.field.lid,
							'gid' : obj.data.gid,
							'quantity': obj.data.goodsQuantity//这里data代表的是对话框的data而不是表格的data
						},function(flag) {
							if (flag) {
								table.reload('orderTable', {});
								layer.msg("发货成功");
								layer.closeAll('page');
							} else {
								layer.msg("发货失败");
							}
						})
						return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
					});
				}
				if (obj.event === 'edit') {
					//填充表单数据
					fillSelect($,'../goods/list','#goodsSelect','gname','gid',data.goods.gid);
					fillSelect($,'../buyer/list','#buyerSelect','bname','bid',data.buyer.bid);
					
					//修改对话框
					layer.open({
						title : '修改',
						content : $('#edit-dialog').html(),
						type : 1,
					});
					console.log(data);
					form.val('edit-form', {
						'oid' : data.oid,
						'uid' : data.user.uid,
						'gid' : data.goods.gid,
						'gname' : data.goods.gname,
						//'lname' : data.logistic.lname,
						'bid' : data.buyer.bid,
						'bname' : data.buyer.bname,
						'goodsQuantity': data.goodsQuantity
						
					})
					//console.log(data.goodsQuantity);
					$('#statSelect' + " option[value='"+ data.stat + "']").attr("selected", true);
					//Ajax方法获得页面下拉选项
					//提交表单修改，关闭添加对话框
					form.on('submit(edit-submit)', function(data) {
						console.log(data.field);
						$.post('../order/update', data.field, function(flag) {
							if (flag) {
								table.reload('orderTable', {});//刷新表格
								layer.msg('修改成功');
								layer.closeAll('page');//关闭当前弹出对话框
							} else {
								layer.msg('修改失败');
							}
						})
						return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
					});
				}
			});
			//删除
			$("#remove-btn").click(function() {
				var checkStatus = table.checkStatus('orderTable');
				var oids = [];
				for ( let i in checkStatus.data) {
					oids.push(checkStatus.data[i].oid);
				}
				//console.log(oids);
				$.post('../order/delete',{
					'oids' : oids
				}, function(flag) {
					if (flag) {
						table.reload('orderTable', {});
						layer.msg("删除成功");
					} else {
						layer.msg("删除失败");
					}
				});
			});
			//添加
			$("#add-btn").click(function() {
				layer.open({
					title : '添加',
					content : $('#add-dialog').html(),
					type : 1,
					closeBtn : 1
				});
				form.render('select');//重新渲染
				//填充添加对话框内的下拉框
				fillSelect($,'../goods/list','#goodsSelect','gname','gid');
				fillSelect($,'../buyer/list','#buyerSelect','bname','bid');
				
				form.val('add-form', {
					'uid':1//注：获得当前用户的方法尚未填写，因此默认为第一个管理员用户
				})
				form.on('submit(save-submit)', function(data) {
					$.post('../order/insert', data.field, function(flag) {
						if (flag) {
							table.reload('orderTable', {});
							layer.msg("添加成功");
							layer.closeAll('page');
						} else {
							layer.msg("添加失败");
						}
					})
					return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
				});

			});

		});
	</script>
	

	<script type="text/html" id="deliver-dialog">
		<form class="layui-form" method="post" lay-filter="deliver-form">
		<input type="hidden" name="stat">
		<div class="layui-form-item">
			<label class="layui-form-label">订单号</label>
			<div class="layui-input-inline">
				<input type="text" name="oid" required lay-verify="required"
					class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">物流公司</label>
			<select name="lid" id="com-select">
				<option value="">请选择物流公司</option>
			</select>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="deliver-submit">发货</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	</script>

	<!-- 添加对话框 -->
	<script type="text/html" id="add-dialog">
	<form lay-filter="add-form" class="layui-form" method="post">
		<input type="hidden" name="uid"/>
		<div class="layui-form-item">
			<label class="layui-form-label">商品</label>
			<div class="layui-input-block">
				<!-- 选项待填充 -->
				<select id="goodsSelect" name="gid" lay-verify="required">
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">客户</label>
			<div class="layui-input-block">
				<!-- 选项待填充 -->
				<select id="buyerSelect" name="bid" lay-verify="required">
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">商品数量</label>
			<div class="layui-input-inline">
				<input type="text" name="goodsQuantity" required
					lay-verify="required|number" placeholder="请输入商品数量"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">订单状态</label>
		<div class="layui-input-inline">
			<select name="stat" lay-verify="">
				<option value="">请选择订单状态</option>
				<option value="0" selected>待付款</option>
				<option value="1">待发货</option>
				<option value="2">已发货</option>
				<option value="3">已完成</option>
				<option value="4">已取消</option>
			</select>
		</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="save-submit">保存</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	
		
	</script>

	<!-- 修改对话框 -->
	<script type="text/html" id="edit-dialog">
	<form lay-filter="edit-form" class="layui-form" method="post">
		<input type="hidden" name="oid"/>
		<div class="layui-form-item">
			<label class="layui-form-label">商品</label>
			<div class="layui-input-block">
				<!-- 选项待填充 -->
				<select id="goodsSelect" name="gid" lay-verify="required">
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">客户</label>
			<div class="layui-input-block">
				<!-- 选项待填充 -->
				<select id="buyerSelect" name="bid" lay-verify="required">
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">商品数量</label>
			<div class="layui-input-inline">
				<input type="text" name="goodsQuantity" required
					lay-verify="required|number" placeholder="请输入商品数量"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">订单状态</label>
		<div class="layui-input-inline">
			<!-- 选项待填充 -->
			<select id="statSelect" name="stat" lay-verify="required">
				<option value="0">待付款</option>
				<option value="1">待发货</option>
				<option value="2">已发货</option>
				<option value="3">已完成</option>
				<option value="4">已取消</option>
			</select>
		</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="edit-submit">保存</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
	
	</script>
	
	<div class="demoTable">
		<table>
			<tr>
				<td>搜索</td>
				<td>
					<form class="layui-form">
						<div class="layui-input-inline">
							<select name="stat" lay-verify="" id="form-select">
								<option value="">请选择订单状态</option>
								<option value="0">待付款</option>
								<option value="1">待发货</option>
								<option value="2">已发货</option>
								<option value="3">已完成</option>
								<option value="4">已取消</option>
							</select>
						</div>
				</td>
				<td>
						<div class="layui-input-inline">
							<input type="text" id="form-input" name="oid" required
								lay-verify="required|number" placeholder="请输入订单编号"
								autocomplete="off" class="layui-input">
						</div>
				</td>
				</form>
				<td>
						<button id="search-btn" class="layui-btn">
							<i class="layui-icon layui-icon-search"></i> 搜索
						</button>
						<button id="add-btn" class="layui-btn layui-btn-warm">
							<i class="layui-icon layui-icon-addition"></i> 添加
						</button>
						<button id="remove-btn" class="layui-btn layui-btn-danger">
							<i class="layui-icon layui-icon-delete"></i> 删除
						</button>
				</td>
			</tr>
		</table>
	</div>


	<table id="dg" lay-filter="test"></table>

	<script type="text/html" id="barDemo">    
	{{# if(d.stat == 1){ }}
		<a class="layui-btn layui-btn-xs" lay-event="deliver" >
			<i class="layui-icon layui-icon-release"></i> 
			发货
		</a>
	{{# } else { }}

    {{# } }}

		<a class="layui-btn layui-btn-xs" lay-event="edit">
			<i class="layui-icon layui-icon-edit"></i> 
			编辑
		</a>
	</script>


</body>
</html>